<template>
  <el-card class="swiper-container">
    <template #header>
      <div class="header">
        <div class="search">
        </div>
        <el-button-group>
          <el-button type="primary" @click="created">增加</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="deleted(-1)">
            <template #reference>
              <el-button type="danger">批量删除</el-button>
            </template>
          </el-popconfirm>
        </el-button-group>
      </div>
    </template>
    <el-table v-loading="state.loading" ref="multipleTable" :data="state.tableData" tooltip-effect="dark"
      style="width: 100%" @selection-change="selectionChangeIds">
      <el-table-column type="selection" width="45"/>
      <el-table-column prop="id" label="#ID" align="center"/>
      <el-table-column prop="title" label="会员等级" align="center">
        <template #default="scope">
          <el-input v-if="state.edit === scope.row.id" v-model.trim="scope.row.title"></el-input>
          <span v-else>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="储值金额上限" align="center">
        <template #default="scope">
          <el-input v-if="state.edit === scope.row.id" v-model.number="scope.row.divide"></el-input>
          <span v-else><code style="color: var(--el-color-danger);">{{ scope.row.divide }}</code> 元</span>
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center" width="320">
        <template #default="scope">
          <el-input v-if="state.edit === scope.row.id"
            type="textarea" v-model.number="scope.row.remark" :input-style="{
              height: '72px'
            }"></el-input>
          <span v-else>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" align="center" width="100">
        <template #default="scope">
          <el-input v-model.trim="scope.row.orderby"
            @change="updated(scope.row)"
            :input-style="{ textAlign: 'center'}">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" align="center" width="200">
        <template #default="scope">
          {{ toDateTime(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button-group>
            <el-button type="success" v-if="scope.row.id === state.edit" @click="updated(scope.row)">保存</el-button>
            <el-button type="primary" v-else @click="edit(scope.row)">修改</el-button>

            <el-popconfirm title="确定删除吗？" @confirm="deleted(scope.row.id)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next, sizes, total"
      :hidden="true"
      :total="state.total"
      :page-size="state.pageSize"
      :current-page="state.currentPage"
      @current-change="changePage"></el-pagination>
  </el-card>
</template>

<script setup>

import { toDateTime } from "../../utils";
import { AdminUserRuleDel, AdminUserRuleList, AdminUserRulePost, AdminUserRulePut } from "../../api/server/user/rule";
import { ElMessage } from "element-plus";

const state = reactive({
  edit: false,
  loading: true,
  selectedData: [],
  tableData: [],
  addData: [],
  total: 0,
  pageSize: 10,
  currentPage: 1,
})

const params = reactive({})

onMounted(() => {
  getUserRuleList()
})

const getUserRuleList = () => {
  state.loading = true
  AdminUserRuleList(params).then((e) => {
    state.tableData = e
    state.loading = false
  })
}

const selectionChangeIds = row => {
  state.selectedData = row
}


const getSelectedIds = () => {
  return state.selectedData.map(d => d.id)
}

const changePage = (page) => {

}

const created = () => {
  state.edit = 0
  if (state.addData.length) {
    ElMessage.error('请先保存已有的数据项')
    return false;
  }
  let item = {
    id: 0,
    title: '',
    divide: 0,
    remark: '',
    orderby: 0
  }
  state.addData.push(item);
  state.tableData.push(item);
}

const edit = row => {
  state.edit = +row.id
}

const updated = row => {
  if (!row.title) {
    ElMessage.error('请输入会员等级名称')
    return false
  }
  if (row.divide <= 0) {
    ElMessage.error('请输入储值金额上限或输入的值有误')
    return false
  }
  if (row.id === 0) {
    console.info(row)
    AdminUserRulePost(row).then((e) => {
      if (e.code === 200) {
        state.edit = false
        state.addData = []
        getUserRuleList()
        ElMessage.success('保存成功')
      }
    })
    return false
  }

  row.orderby = +row.orderby
  AdminUserRulePut(row.id, row).then((e) => {
    if (e.code === 200) {
      state.edit = false
      getUserRuleList()
      ElMessage.success('保存成功')
    }
  })
}

const deleted = id => {
  if (id === 0) {
    state.tableData.splice(1, 1)
    return false;
  }
  if (id === -1) id = getSelectedIds().toString()
  if (!id) {
    ElMessage.error('请选择删除项')
    return false
  }

  AdminUserRuleDel(id).then((e) => {
    if (e.code === 200) {
      getUserRuleList()
      ElMessage.success('操作成功')
    }
  })
}
</script>

<style scoped>
.main :deep(.el-card .el-card__header) {
  padding-top: 16px;
}
</style>
